<template>
	<div class="cms-container">
		<el-card shadow="hover">
			<div class="flex-warp">
				<el-row :gutter="10" class="w100">
					<el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6" class="mb10" v-for="(row, index) in tableData.data" :key="index">
						<div class="flex-warp-item">
							<div class="flex-warp-item-box">
								<h3 class="mb10 item-head" :class="row.status == 0 ? 'color-primary' : 'color-info'">{{row.name}}</h3>
								<div class="item-img">
									<center>
										<el-image style="height: 65px;" v-if="row.logo" :src="row.logo" :preview-src-list="[row.logo]" fit="contain"></el-image>
										<el-image style="height: 65px;" v-else src="favicon.png" :preview-src-list="['favicon.png']" fit="contain"></el-image>
									</center>
								</div>
								<div class="item-txt">
									<div class="item-txt-title">
										{{row.remark}}
									</div>
								</div>
								<el-button @click="onOpenMgrSite(row)" type="primary" link icon="el-icon-position">进入</el-button>
								<el-button v-auth="'cms:site:edit'" @click="onOpenEditSite(row)" type="primary" link icon="el-icon-edit">修改</el-button>
								<el-button v-auth="'cms:site:remove'" @click="onOpenDelSite(row)" type="primary" link icon="el-icon-delete">删除</el-button>
							</div>
						</div>
					</el-col>
					<el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6" class="mb10">
						<div class="flex-warp-item">
							<div class="flex-warp-item-box">
								<h3 class="mb10 color-info">+ 创建站点</h3>
								<div class="item-img">
									<el-image style="height: 65px;" fit="contain"></el-image>
								</div>
								<div class="item-txt">
									<div class="item-txt-title">
										创建一个新的内容管理站点空间~~
									</div>
								</div>
								<el-button v-auth="'cms:site:add'" @click="onOpenAddSite()" type="primary" link icon="el-icon-plus">创建</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<AddSite ref="addSiteRef" @submit="onSitesReload"/>
			<EditSite ref="editSiteRef" @submit="onSitesReload"/>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import AddSite from '/@/views/cms/channel/addSite.vue';
import EditSite from '/@/views/cms/channel/editSite.vue';
import { getChannelList, delSite } from '/@/api/cms/channel/index';
export default {
	name: 'cms/material',
	components: { AddSite, EditSite },
	setup() {
		const addSiteRef = ref();
		const editSiteRef = ref();
		const router = useRouter();
		const state = reactive({
			tableData: {
				data: [],
			}
		});

		const loadTableData = () => {
			getChannelList({parentId : 0}).then(res => {
				if(res.code === 0){
					state.tableData.data = res.data;
				}
			});
		}
		const onSitesReload = () => {
			loadTableData();
		}
		//新增站点
		const onOpenAddSite = (row?: object) => {
			addSiteRef.value.openDialog(row);
		}
		const onOpenEditSite = (row?: object) => {
			editSiteRef.value.openDialog(row);
		}
		const onOpenDelSite = (row?: object) => {
			ElMessageBox.confirm('确定删除该【' + row.name + '】站点空间信息吗？', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delSite([row.id]).then((res) => {
					if(res.code === 0){
						ElMessage.success('删除成功');
						onSitesReload();
					}
				});
			}).catch(() => {});
		}
		const onOpenMgrSite = (row?: object) => {
			router.push({
				path: 'cms/site',
				query: {
					id: row.id,
					tagsViewName: row.name
				},
			});
		}
		// 页面加载时
		onMounted(() => {
			loadTableData();
		});
		
		return {
			addSiteRef,
			editSiteRef,
			onOpenAddSite,
			onOpenEditSite,
			onOpenDelSite,
			onOpenMgrSite,
			onSitesReload,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
.cms-container{	
	.flex-warp {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		.flex-warp-item {
			width: 100%;
			height: 220px;
			.flex-warp-item-box {
				border: 1px solid var(--el-color-primary-light-9);
				width: 100%;
				height: 100%;
				padding: 10px;
				border-radius: 2px;
				flex-direction: column;
				transition: all 0.3s ease;
				&:hover {
					opacity: 1;
					transition: all ease 0.3s;
					cursor: pointer;
					border: 1px solid var(--el-color-primary);
				}
				.item-head{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
				.item-img {
					height: 65px;
				}
				.item-txt {
					flex: 1;
					height: 50px;
					display: flex;
					flex-direction: column;
					.item-txt-title {
						padding: 0 15px;
						color: var(--el-color-info-light-3);
						text-indent: 1em;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
	}
}
</style>